

window.onload = function(){
    //第一步，选取要操作的元素
    var box = document.querySelectorAll('#box')[0];
    var aLi = document.querySelectorAll('.list li');
    var aNum = document.querySelectorAll('.count li');
    var index = 0;
    var timer = dd = null;
    var right=document.querySelector('.lunbo-right');
    var left=document.querySelector('.lunbo-left');
    var b=0;



    //先写手动的
    for(var i=0;i<aNum.length;i++){
        //先把下标存储一下
        aNum[i].index = i;
        aNum[i].onmouseover = function(){
            show(this.index);
            b= this.index;
        }
    }
    function show(a){
        //当前图片显示的时候，那么，其余的图片应该都是隐藏状态吧
        //这里，要改变下index的当前值就好了
        index = a;
        for(var i=0;i<aLi.length;i++){
            aLi[i].style.opacity = 0;
            aNum[i].className = '';

        }
        //让当前的图片显示
        aNum[a].className = 'current';
        aLi[a].style.opacity = 1;
    }




    //再写自动的
    function autoplay(){
        timer = setInterval(function(){
            index++;
            if(index >= aLi.length){
                index = 0;
            }
            console.log(index);
            show(index);
            b= this.index;
        },5000)
    }
    autoplay();




    //当鼠标移入这个box的时候，这个autoplay停止,移出的时候继续

    box.onmouseover = function(){
        clearInterval(timer);
        left.style.display='block';
        right.style.display='block';

    }
    box.onmouseout = function(){
        autoplay();
        left.style.display='none';
        right.style.display='none';
    }

    //点击
    left.onclick= function () {
        b++;
        if(b ==aLi.length){
            b = 0;
        }
        show(b);

    }
    right.onclick= function () {
        if( b == 0){
            b =aLi.length;
        }
        b--;
        show(b);

    }
}
